<template>
    <div class="home">
        <p>姓名：{{ name }}</p>
        <p>年龄：{{ age }}</p>
        <p> nl :{{ nl}}</p>
        <button @click="changeName">修改名字</button>
        <button @click="changeAge">修改年龄</button>
    </div>
</template>


<script setup lang="ts" name="Page15">
import { ref, reactive,toRef, toRefs } from 'vue';
let person = reactive({
    name: '张三',
    age: 18
})
let {name,age}=toRefs(person)
let nl = toRef(person,'age')

function changeName() {
    // person.name += '~'
    name.value+='~'
    // console.log(name)
}
function changeAge() {
    // person.age += 1
    // age.value +=1
    // console.log(age)
    nl.value += 1
}
</script>

<style lang="scss" scoped></style>